import React, { Component} from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import actionsC from '@/store/actions.js'
import { getCurrentNode } from '@/store/selectors'
import PanleWrapper from '@/components/panel/panel-wrapper'
import { observer, inject } from 'mobx-react'

let actions=actionsC()

/**
 * 可以拖动修改text节点的排序位置
 */
@inject('rootStore')
@observer
class PanleText extends Component {
	constructor(props) {
		super(props);
		this.state = {
			activeIndex: 0
		}
	}
	componentWillReceiveProps(nextProp){
	}	
	//设置当前节点为操作节点
	setActive(index){
		this.setState({
			activeIndex: index
		})
	}
	textChange(e){
		const { currentPath, nodeTree } = this.props.rootStore
		let path = currentPath.concat(this.state.activeIndex)
		dispatch.nodeUpdateByPath({
			path: path,
			node:{
				text: e.target.value
			}
		})
	}
	handleFocus(){
		const { dispatch } = this.props.rootStore;
		this.props.rootStore.updateInputStatus(true)
	}
	handleBlur(){
		this.props.rootStore.updateInputStatus(false)
	}
	render() {
		let { currentNode } = this.props.rootStore;
		let { activeIndex } = this.state;
		let { children } = currentNode
		children = _.isArray(children) ? children : []
		let text = _.get(children, `[${activeIndex}].text`)
		text = text ? text : ""
		return (
			<PanleWrapper clsName="panel-text" panelName="children">
				<ul className="child-list l-sortable">
						{children.map((item, index)=>{
							if(item.tag == 'text'){
								return(
									<li key={index}
										className={classnames('text-node', {active: index == activeIndex})}
										onClick={this.setActive.bind(this, index)} >
										T
									</li>
								)
							}else{
								return(
									<li key={index}>	
										{index+1}
									</li>
								)
							}
						})}
					</ul>
					<textarea
						readOnly={_.get(children,`[${activeIndex}].tag`)!='text'}
						className="l-editor"
						value={text}
						onChange={this.textChange.bind(this)}
						onFocus={this.handleFocus.bind(this)}
						onBlur={this.handleBlur.bind(this)}
					/> 
			</PanleWrapper>
		)
	}
}

PanleText.defaultProps = {
};

export default PanleText